<template>
  <div class="nav-box">
    <div class="label" v-for='(item,index) in navList' :key='index'
         :class="{selected: selectedIndex === index}"
         @click="selectItem(index)">
      <!-- 标签标题 -->
      <i class="iconfont icon-24gf-tags4"></i>
      <div class="label-title">{{item.title}}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selectedIndex = ref(0)

const prop = defineProps({
  navList: {
    type: Array,
    required: true
  },
  currentIndex: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['selectItem'])

const selectItem = (index) => {
  selectedIndex.value = index
  emit('selectItem', index)
}

</script>

<style lang="scss" scoped>
.nav-box {
  height: 100%;
  .selected {
    background: #a7a4a4;
  }
  .label {
    font-size: 16px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: #611635;
    border: none;
    padding: 10px 5px;
    &:hover {
      background: #f7d4a6;
      color: #ed8c0b;
    }
    i {
      font-size: 18px;
      color: gray;
    }
    .label-title {
      font-weight: 600;
      padding-left: 10px;
      width: 120px;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

}
</style>
